<template>
	<view>
		<view class="header">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in images" :key="index">
					<!-- 这里的src属性很容易犯错误，请注意，正确写法是：src不是src。 -->
					<image :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view class="grid-item" @tap="getToNavgate(item.name)" v-for="(item,index) in nav" :key="index">
				<!-- 2025-10-17 getToNavgete()方法让他跳转到指定的页面，目前需要实现这个函数，在script标签中 -->
				<text :class="`iconfont icon-`+ item.icon" :style="'color:'+ item.iconColor"></text>
				<view>{{item.text}}</view>
			</view>	
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				images:[
					"/static/images/1.jpg",
					"/static/images/2.jpg",
					"/static/images/3.jpg"
				],
				nav:[{
						icon: "meishi", // 响应式数据渲染到属性中，属性原本还有非变量的文本  将非变量文本，用``把文本内容包裹起来 然后+上变量
						text: "美食",
						name: "food",
						iconColor: "red"
					
					},
					{
						icon: "zhuangxiu",
						text: "装修",
						name: "zhuangxiu",
						iconColor: ""
					},
					{
						icon: "xiyu",
						text: "洗浴",
						name: "xiyu",
						iconColor: ""
					},
					{
						icon: "qiche",
						text: "汽车",
						name: "car",
						iconColor: ""
					},
					{
						icon: "changge",
						text: "唱歌",
						name: "sing",
						iconColor: ""
					},
					{
						icon: "zhusu",
						text: "住宿",
						name: "zhusu",
						iconColor: ""
					},
					{
						icon: "boshimao",
						text: "学习",
						name: "study",
						iconColor: ""
					},
					{
						icon: "shiwu-gongwenbao",
						text: "工作",
						name: "work",
						iconColor: ""
					},
					{
						icon: "wedding",
						text: "结婚",
						name: "marry",
						iconColor: ""
					}
				]
			};
		},
	
		methods:{
			getToNavgate(name){
				// 2025-10-17 小袁 利用uni.navigateTo函数跳转到指定的页面中
					// 理论上我们可以这么写
					// url:"/pages/food/food"
					// 为了能够灵活页面的传入的值,更多的封装思想,这里把第14行代码改成@tap="getToNavgate('food')
					//  url:"/pages/${food}/${food}"
				uni.navigateTo({
					url: `/pages/${name}/${name}?name='张三'`
				})
			},
			//randomColor()方法不能写错
			randomColor(){
				//随机生成色相hue,范围从0到360。
				var hue = Math.floor(Math.random() * 360);
				
				//固定饱和度和亮度

				var saturation = 50; // 可以根据需要调整
				var lightness = 50; // 可以根据需要调整
				// 将 HSL 色彩值转换为 RGB 色彩值如hsl(120,50%,50%)
				var hslColor = 'hsl(' + hue + ',' + saturation + '%,' + lightness + '%)';
				return hslColor
			}
		},
		onLoad() {//用于生命周期钩子，获取导航数据
			let navDatas = this.nav   // 组件nav赋值给navDatas
			for (const i in navDatas) { //遍历导航窗格，navDatas[i]索引值为了0的导航窗格
				navDatas[i].iconColor = this.randomColor()
			}
			this.nav = navDatas    //将更新后的navDatas赋值回this.nav,确保组件的nav数据中包含新的图标颜色
		}
		
		
		
		// randomColor() {
		// 		// 随机生成色相
		// 		var hue = Math.floor(Math.random() * 360);
		
		// 		// 固定饱和度和亮度
		// 		var saturation = 50; // 可以根据需要调整
		// 		var lightness = 50; // 可以根据需要调整
		
		// 		// 将 HSL 色彩值转换为 RGB 色彩值 hsl(120,50%,50%)
		// 		var hslColor = 'hsl(' + hue + ',' + saturation + '%,' + lightness + '%)';
		// 		return hslColor
		// 	}
		// },
		// onLoad() {
		// 	let navDatas = this.nav   // 组件nav赋值给navDatas
		// 	for (const i in navDatas) {//遍历导航窗格，navDatas[i]索引值为了0的导航窗格
		// 		navDatas[i].iconColor = this.randomColor()
		// 	}
		// 	this.nav = navDatas
		// }
	}
</script>

<style lang="scss">
	@import "/static/iconfont/iconfont.css";
	
	swiper{
		width:750rpx;
		height:400rpx;
	image{
		width:100%;
		height:100%
		}
	}
	
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			/* 定义三列，每列占据等宽空间 */
			grid-template-rows: repeat(3, 1fr);
			/* 定义三行，每行占据等高空间 */
			gap: 1rpx;
			/* 网格间距 */
			padding: 1rpx;
		}
		.grid-item{
			background-color: #fff;
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100px;
			border: 1rpx solid rgb(219,219,219);
		}
		.iconfont{
				box-sizing:border-box;
				padding: 30rpx 24rpx;
				display: block;
				font-size: 72rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;	
		}
</style>
